<template>
  <div class="user">
    <!-- 下拉刷新数据 -->
    <van-pull-refresh class="pull-refresh" v-model="isLoading" @refresh="onRefresh">
      <!--<nav-bar head-title="用户中心" go-back="true" go-url="/home"/>-->
      <div class="user-info">
          <div class="person_top">
            <div class="per_con">
              <div class="user_photo">
                <img :src="userInfo.imageUrl">
                <span v-text="userInfo.telephone"></span>
              </div>
              <div class="name_right">
                <p class="user-name" v-text="userInfo.nickname"></p>
                <p>等级：{{userInfo.name}}</p>
                <p>积分：{{userInfo.integral}}</p>
              </div>
              <div class="user-setting">
                <router-link to="user/userInfo">
                  <van-icon name="setting" />
                </router-link>
              </div>
            </div>
          </div>
      </div>
      <van-cell-group class="user-cell-box">
        <van-cell title="我的钱包" icon="gold-coin" is-link v-bind:value="parseFloat(userInfo.balance.toFixed(2)) + '元'" @click="$router.push('/user/wallet')"/>
        <van-cell title="我的订单" icon="pending-orders" is-link v-bind:value="userInfo.orderSum === null ? 0 : userInfo.orderSum + '条'" @click="$router.push('/user/order')"/>
        <van-cell title="我的地址" icon="location" is-link @click="$router.push('/user/address')"/>
        <van-cell title="我的消息" icon="chat" is-link v-bind:value="userInfo.messageSum === null ? 0 : userInfo.messageSum + '条'" @click="$router.push('/user/message')"/>
        <van-cell title="我的评价" icon="records" is-link v-bind:value="commentCount + '条'" @click="$router.push('/comment/commentdetail')"/>
      </van-cell-group>
    </van-pull-refresh>
    <!-- 引入公共底部 -->
    <tab-bar/>
  </div>
</template>
<script>
import NavBar from '../../components/common/NavBar.vue'
import TabBar from '../../components/common/TabBar.vue'
import userApi from '../../api/user'
import header from '@/assets/user/header.png'
export default {
  name: 'user',
  data () {
    return {
      isLoading: false,
      commentCount: '',
      userInfo: {
        telephone: '',
        nickname: '',
        name: '',
        integral: 0,
        balance: 0,
        orderSum: 0,
        messageSum: 0,
        imageUrl: header
      }
    }
  },
  components: {
    NavBar,
    TabBar
  },
  created () {
    this.getMemberDetail()
    this.getCommentCount()
  },
  methods: {
    // 下拉刷新数据
    onRefresh () {
      setTimeout(() => {
        this.getMemberDetail()
        this.isLoading = false
      }, 500)
    },
    getCommentCount () {
      var _this = this
      userApi.getCommentGoodsCount().then(function (res) {
        _this.commentCount = res.data.re
      })
    },
    getMemberDetail: function () {
      let _this = this
      userApi.getMemberDetailById().then(function (data) {
        let res = data.data.re
        if (res.imageUrl !== null && res.imageUrl !== '') {
          _this.userInfo = res
        } else {
          _this.userInfo = res
          _this.userInfo.imageUrl = header
        }
      })
    }
  }
}
</script>
<style>
  .per_con {
    overflow: hidden;
    padding: 15px 0 10px;
    width: 100%;
    background: url(../../../static/images/user/user-bg.jpg);
    background-size: cover;
  }

  .per_con .user_photo {
    display: inline;
    float: left;
    width: 35%;
    overflow: hidden;
    text-align: center;
  }

  .per_con img {
    border-radius: 50%;
    height: 60px;
    width: 60px;
    border: 3px solid #edc700;
  }

  .per_con .user-name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px!important;
    font-weight: bold;
  }
  .per_con .user_photo span {
    color: #ffffff;
    width: 100%;
    text-align: center;
    display: block;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
  }

  .per_con .name_right {
    padding-left: 1%;
    float: left;
  }

  .per_con .name_right p {
    font-size: 12px;
    line-height: 22px;
    margin: 0px;
    color: #ffffff;
  }

  .per_con .name_right .p1 {
    color: #333333;
    font-size: 16px;
    margin: 6px 0;
  }

  .per_con .name_right .p2 {
    color: #58a1b0
  }

  .per_con .user-setting {
    float: right;
    margin-right: 20px;
  }

  .per_con .user-setting i {
    font-size: 20px;
    color: #fff;
  }
</style>
